<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>成绩分析</title>
    <script src="../util/axios.min.js"></script>
    <script src="../util/echarts.js"></script>    <style>
        body {
            background: url('../images/vmbg2.png') center/cover no-repeat fixed; /* 使用背景图像 */
            font-family: Arial, sans-serif;
            margin: 0;
            overflow: hidden;
        }

        #main {
            width: 100%;
            height: 100vh;
            padding: 20px;
        }

        #chart-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #chart-tooltip {
            position: absolute;
            padding: 10px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: none;
        }
    </style>
</head>

<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main"></div>

<script type="text/javascript">
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        config.headers.token = localStorage.getItem("token");
        // 在发送请求之前做些什么
        return config;
    });

    axios({
        method: 'GET',
        url: 'http://localhost:8080/examRecord/examScoreList',
    }).then((resp) => {
        const data = resp.data.data;

        const xData = [];
        const yData = [];
        for (const [key, value] of Object.entries(data)) {
            xData.push(key);
            yData.push(value);
        }

        const myChart = echarts.init(document.getElementById('main'));

        const option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: yData,
                    type: 'line',
                    areaStyle: {}
                }
            ]
        };

        myChart.setOption(option);

        const chartContainer = document.getElementById('main');
        const chartTooltip = document.createElement('div');
        chartTooltip.id = 'chart-tooltip';
        chartContainer.appendChild(chartTooltip);

        myChart.on('mousemove', function (params) {
            const dataIndex = params.dataIndex;
            const x = params.event.offsetX;
            const y = params.event.offsetY;
            const value = yData[dataIndex];

            chartTooltip.style.top = y + 'px';
            chartTooltip.style.left = x + 'px';
            chartTooltip.innerHTML = 'Value: ' + value;

            chartTooltip.style.display = 'block';
        });

        myChart.on('mouseout', function () {
            chartTooltip.style.display = 'none';
        });

        window.addEventListener('resize', function () {
            myChart.resize();
        });
    });
</script>
</body>

</html>
